import { useEffect, useState } from 'react'
import { getMypageData } from '../../api/User'
import { getUserMessage, cleUserMessage } from '../../store/actionDemo'
import { Space, Avatar, Button, Image, List, Dialog, Toast } from 'antd-mobile'
import store from '../../store/index'
import type { MypageData } from '../../types/mypage'
import { useHistory } from 'react-router-dom'

export default function useIndex() {
  const [userInfo, setUseInfo] = useState<MypageData>({} as MypageData)
  const history = useHistory()
  const GetUserInfo = async () => {
    const token = store.getState().counter.token
    if (token) {
      const res = await getMypageData()
      if (res.code === 200) {
        store.dispatch(getUserMessage(res.data))
        setUseInfo(res.data)
      }else{
        history.push('/login')
      }
    } else {
      history.push('/login')
    }
  }
  useEffect(() => {
    GetUserInfo()
  }, [])
  return (
    <div className="my-container" v-if="userInfo">
      <div className="header">
        <Space block wrap>
          <Image
            src={userInfo.avatar}
            width={64}
            height={64}
            fit='cover'
            style={{ borderRadius: 32 }}
          />
        </Space>
        <p className="nickname">{userInfo.username}</p>
      </div>
      <List className="body">
        <List.Item onClick={() => { }}>会员中心</List.Item>
        <List.Item onClick={() => { }}>我的订单</List.Item>
        <List.Item onClick={() => { }}>收货地址</List.Item>
        <List.Item onClick={() => { }}>我的足迹</List.Item>
        <List.Item onClick={() => { }}>我的收藏</List.Item>
        <List.Item onClick={() => { }}>意见反馈</List.Item>
      </List>
      <div className="footer">
        <Button
          block
          color='danger'
          size='large'
          shape='rounded'
          onClick={async () => {
            const result = await Dialog.confirm({
              content: '确认退出么',
            })
            if (result) {
              store.dispatch(cleUserMessage({}))
              history.push('/login')
            } else {
            }
          }}
        >
          退出
        </Button>
      </div>
    </div>
  )
}
